import React from "react";
import "./indexh.scss";
import { Button, Space, Swiper, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";

// import Lanlogin from "../../component/Lanlogin";
function Home() {
  const data = [
    "亲子游",
    "文化游",
    "温泉游",
    "周边游",
    "旅游地图",
    "酒店名宿",
    "汽车票",
    "飞机票",
  ];

  const colors = [
    "https://img0.baidu.com/it/u=492853647,3992702713&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
    "https://img1.baidu.com/it/u=4017768669,3109790205&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=502",
    "https://img0.baidu.com/it/u=500448010,1398295757&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380",
    "https://img2.baidu.com/it/u=2241298607,3794127535&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
  ];

  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        style={{width:"100%",height:"150px"}}
      >
        <img src={color} style={{width:"100%",height:"150px"}} alt="" />
      </div>
    </Swiper.Item>
  ));
  const navigate = useNavigate()
  const gosou = ()=>{
    navigate('/sou')
  }

  const golist = ()=>{
    navigate('/list')
  }
  return (
    <div className="homea">
      <input type="text" placeholder="搜索目的地/景点"  onClick={()=>{
        gosou()
      }}/>
      <div className="bod">
        {data.map((v, i) => {
          return <div key={i} onClick={()=>{
            golist()
          }}>{v}</div>;
        })}
      </div>
      <div className="sw">
        <Swiper
          loop
          autoplay
        >
          {items}
        </Swiper>
      </div>
    </div>
  );
}

export default Home;
